<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>太极</title>
		<style type="text/css">
			 div{
				width: 1000px;
				height: 1000px;
				margin: 0 auto;
				border: 1px solid;
			}
		</style>
	</head>
	<body>
		<div>
			<canvas id="mycanvas" width="1000" height="1000"></canvas>
		</div>
		<script type="text/javascript">
			var canvas = document.getElementById("mycanvas");
			var ctx= canvas.getContext("2d");
			var R=100;
			var rot = 0;
			var leftx=250;
			var leftx1=450;
			var xuanzhanjd = 5;
			var huchang= 5*Math.PI*200/180;
			
			setInterval(function(){
			
			ctx.beginPath();
			ctx.fillStyle="#FFFF00";
			ctx.fillRect(0,0,1000,1000);
			
			ctx.beginPath();
			ctx.arc(leftx,350,R,(rot/180)*Math.PI,(1+rot/180)*Math.PI ,true);
			ctx.closePath();
			ctx.fillStyle="#F0F8FF";
			ctx.fill();
			
			ctx.beginPath();
			ctx.arc(leftx,350,R,(rot/180)*Math.PI,(1+rot/180)*Math.PI);
			ctx.closePath();
			ctx.fillStyle="#000000";
			ctx.fill();
			
			var y = Math.sin(rot/180*Math.PI)*0.5*R;
			var x = Math.cos(rot/180*Math.PI)*0.5*R;
			
			ctx.beginPath();
			ctx.fillStyle="#F0F8FF";
			ctx.arc(leftx-x,350-y,0.5*R,0,2*Math.PI);
			ctx.fill();
			
			ctx.beginPath();
			ctx.fillStyle="#000000";
			ctx.arc(leftx+x,350+y,0.5*R,0,2*Math.PI);
			ctx.fill();
			
			ctx.beginPath();
			
			ctx.arc(leftx-x,350-y,0.1*R,0,2*Math.PI);
			ctx.fillStyle="#000000";
			ctx.fill();
			
			ctx.beginPath();
			ctx.fillStyle="#F0F8FF";
			ctx.arc(leftx+x,350+y,0.1*R,0,2*Math.PI);
			ctx.fill();
			
			rot= rot+xuanzhanjd;
			leftx=leftx+huchang;
			if(leftx>700|| leftx<50){
				huchang=-huchang;
				xuanzhanjd=-xuanzhanjd;
			}
			
			
			ctx.beginPath();
			ctx.arc(leftx1,350,R,(rot/180)*Math.PI,(1+rot/180)*Math.PI ,true);
			ctx.closePath();
			ctx.fillStyle="#F0F8FF";
			ctx.fill();
			
			ctx.beginPath();
			ctx.arc(leftx1,350,R,(rot/180)*Math.PI,(1+rot/180)*Math.PI);
			ctx.closePath();
			ctx.fillStyle="#000000";
			ctx.fill();
			
			var y = Math.sin(rot/180*Math.PI)*0.5*R;
			var x = Math.cos(rot/180*Math.PI)*0.5*R;
			
			ctx.beginPath();
			ctx.fillStyle="#F0F8FF";
			ctx.arc(leftx1-x,350-y,0.5*R,0,2*Math.PI);
			ctx.fill();
			
			ctx.beginPath();
			ctx.fillStyle="#000000";
			ctx.arc(leftx1+x,350+y,0.5*R,0,2*Math.PI);
			ctx.fill();
			
			ctx.beginPath();
			
			ctx.arc(leftx1-x,350-y,0.1*R,0,2*Math.PI);
			ctx.fillStyle="#000000";
			ctx.fill();
			
			ctx.beginPath();
			ctx.fillStyle="#F0F8FF";
			ctx.arc(leftx1+x,350+y,0.1*R,0,2*Math.PI);
			ctx.fill();
			
			rot= rot+xuanzhanjd;
			leftx1=leftx1+huchang;
			if(leftx1>800|| leftx1<300){
				huchang=-huchang;
				xuanzhanjd=-xuanzhanjd;
			}

			},100)
			
			
			
			
			
			
				
			
		
		</script>
	</body>
</html>

